<template>
	<view class="container u-flex-col u-row-center" :class="[backgroundColor]" v-if="qrUser">
		<view class="title">社区防疫行程卡</view>
		<view class="sub-title">社区防疫行程卡</view>

		<view class="card u-flex-col u-row-left u-col-center">
			<view class="card-title u-flex u-row-center" :class="[backgroundTitle,titleColor]">{{title}}</view>

			<view class="card-user">
				<text>{{showMobile(qrUser.mobile)}}</text>
				<text class="u-m-l-30 u-m-r-10">到达:</text>
				<text>{{qrUser.lastCommunityName}}</text>
			</view>
			<view class="update-text">更新于：{{qrUser.lastCommunityTime}}</view>

			<view class="u-m-t-40 u-m-b-40">
				<image :src="card" style="width: 308rpx;height: 308rpx;"></image>
			</view>

			<view class="u-border-bottom" style="width: 90%;"></view>

			<view style="width: 90%;" class="u-p-t-20 u-p-b-20">
				<text>{{desc}}</text>
			</view>
		</view>
		<view class="bottom-text u-p-10">
			结果包含您在前14天内到访的国家（地区）与停留4小时以上的国内城市色卡仅对到访地作提醒，不关联健康状况
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '请收下绿色行程卡',
				qrUser: null,
				backgroundColor: 'green',
				titleColor: 'c-green',
				backgroundTitle: 't-green',
				desc: '您于前14天内到达或途径：低风险的国家（地区）或城市',
				card: '../static/image/green.png',
				communityId: null
			}
		},
		onLoad(option) {
			let scene = option.scene;
			if (scene) {
				uni.showLoading();
				this.communityId = scene;
				this.getScanCode();
			}

		},
		methods: {
			showMobile(mobile) {
				return mobile.substring(0, 3) + "****" + mobile.substring(mobile.length - 4, mobile.length)
			},
			refrshToken() {
				uni.showLoading();
				this.$u.post('app/refreshToken', {
					mobile: uni.getStorageSync("mobile")
				}).then(ret => {
					console.log(ret);
					uni.$u.vuex('vuex_token', ret.token);
					uni.setStorageSync("expires_in", ret.expire);
					uni.setStorageSync("mobile", ret.mobile);
					this.mobile = uni.getStorageSync("mobile");
					this.getScanCode();
				});
			},
			refrshTokenTest() {
				this.communityId = 1;
				uni.showLoading();
				this.$u.post('app/refreshToken', {
					mobile: '18080064362'
				}).then(ret => {
					console.log(ret);
					uni.$u.vuex('vuex_token', ret.token);
					uni.setStorageSync("expires_in", ret.expire);
					uni.setStorageSync("mobile", ret.mobile);
					this.mobile = uni.getStorageSync("mobile");
					this.getScanCode();
				});
			},
			getScanCode() {
				let mobile = uni.getStorageSync("mobile");
				if (mobile == null || mobile == '') {
					uni.showToast({
						title: "请先授权后再查询",
						icon: "none"
					});
					uni.navigateTo({
						url: '/pages/index'
					});
					return
				}
				if (this.communityId == null) {
					uni.showToast({
						title: "社区不存在",
						icon: "none"
					});
					return
				}

				this.$u.get('/app/qrUser/scanCode', {
					communityId: this.communityId
				}).then(res => {
					uni.hideLoading();
					if (res.code == 401) {
						//token过期了
						this.refrshToken();
						return
					}
					this.qrUser = res;
					this.showQrUser();
				})
			},
			showQrUser() {
				if (this.qrUser.qrStatus == 0 || this.qrUser.qrStatus == 1 || this.qrUser.qrStatus == 2) { //绿卡
					this.title = "请收下绿色行程卡";
					this.backgroundColor = 'green';
					this.backgroundTitle = 't-green';
					this.titleColor = 'c-green';
					this.desc = '您于前14天内到达或途径：低风险的国家（地区）或城市';
					this.card = '../static/image/green.png'
				}
				// else if (this.qrUser.qrStatus == 1) { //黄卡
				// 	this.title = "请收下黄色行程卡";
				// 	this.backgroundColor = 'yellow';
				// 	this.titleColor = 'c-yellow';
				// 	this.backgroundTitle = 't-yellow';
				// 	this.desc = '您于前14天内直接或间接：接触过中风险人群';
				// 	this.card = '../static/image/yellow.png'
				// } else if (this.qrUser.qrStatus == 2) { //红卡
				// 	this.title = "请收下红色行程卡";
				// 	this.backgroundColor = 'red';
				// 	this.titleColor = 'c-red';
				// 	this.backgroundTitle = 't-red';
				// 	this.desc = '您于前14天内直接或间接：接触过高风险人群';
				// 	this.card = '../static/image/red.png'
				// }
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		min-height: 100%;
	}

	.container {
		height: 100%;
		min-height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	.t-green {
		background-color: rgba(41, 167, 106, 0.2) !important;
	}

	.t-red {
		background-color: rgba(231, 67, 27, 0.2) !important;
	}

	.t-yellow {
		background-color: rgba(244, 180, 56, 0.2) !important;
	}

	.c-green {
		color: $u-color-qr-green;
	}

	.green {
		background-color: $u-color-qr-green;
	}

	.red {
		background-color: $u-color-qr-red;
	}

	.yellow {
		background-color: $u-color-qr-yellow;
	}

	.c-green {
		color: $u-color-qr-green;
	}

	.c-red {
		color: $u-color-qr-red;
	}

	.c-yellow {
		color: $u-color-qr-yellow;
	}

	.title {
		text-align: center;
		margin-top: 92rpx;
		font-size: 60rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.sub-title {
		text-align: center;
		margin-top: 30rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #FFFFFF;
	}

	.card {
		border-radius: 20rpx;
		background-color: #FFFFFF;
		margin-top: 38rpx;
		width: 590rpx;
		height: auto;
		margin-left: 80rpx;
		margin-right: 80rpx;
	}

	.card-title {
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
		width: 100%;
		// background-color: #3029A76A;
		font-size: 30rpx;
		background-color: #000000;
		background-color: rgba(41, 167, 106, 0.2);
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}

	.card-user text {
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #4C4C4E;
		line-height: 50px;
	}

	.bottom-text {
		font-size: 20rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin-left: 80rpx;
		margin-right: 80rpx;
	}

	.update-text {
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
	}
</style>
